<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70vw" height="60vh" :fullscreen="true">
    <el-divider content-position="left"> {{ detailsInfo.repairNo }}</el-divider>
    <el-descriptions column="3" border size="large" v-loading="dataLoading">
      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <HelpFilled />
            </el-icon>
            设备名称
          </div>
        </template>
        {{ detailsInfo.equipmentName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Memo />
            </el-icon>
            设备编码
          </div>
        </template>
        {{ detailsInfo.code }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <CopyDocument />
            </el-icon>
            规格型号
          </div>
        </template>
        {{ detailsInfo.equipmentModel }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Reading />
            </el-icon>
            故障分类
          </div>
        </template>
        {{ detailsInfo.faultName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            故障发生时间
          </div>
        </template>
        {{ formatDate(new Date(detailsInfo.faultTime)) }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <UserFilled />
            </el-icon>
            申请人
          </div>
        </template>
        {{ detailsInfo.requestUserName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Histogram />
            </el-icon>
            所属部门
          </div>
        </template>
        {{ detailsInfo.deptName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <StarFilled />
            </el-icon>
            紧急程度
          </div>
        </template>
        <dict-tag :type="DICT_TYPE.URGENCY" :value="detailsInfo.urgency" />
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <DocumentRemove />
            </el-icon>
            维修方式
          </div>
        </template>
        <dict-tag :type="DICT_TYPE.REPAIR_TYPE" :value="detailsInfo.repairWay" />
      </el-descriptions-item>





      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <Link />
            </el-icon>
            故障描述
          </div>
        </template>
        <div class="rich-text-content" v-html="detailsInfo.description"></div>
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <User />
            </el-icon>
            提交人
          </div>
        </template>
        <el-tag size="small">{{ detailsInfo.creatorUserName }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div>
            <el-icon :style="iconStyle">
              <User />
            </el-icon>
            维修人
          </div>
        </template>
        {{ detailsInfo.dutyUserName }}
      </el-descriptions-item>
    </el-descriptions>


    <el-divider content-position="right">制单人: {{ detailsInfo.creatorUserName }} 制单时间: {{ formatDate(new
      Date(detailsInfo.createTime)) }}</el-divider>

  </Dialog>
</template>
<script lang="ts" setup>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('维修申请单') // 弹窗的标题
import { propTypes } from '@/utils/propTypes'
import { RepairRequestApi, RepairRequest } from '@/api/business/repairrequest'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter, formatDate } from '@/utils/formatTime'

defineOptions({ name: 'MaintenanceInformationView' })

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap.large,
  }
})

const detailsInfo = ref({
  id: undefined,
  repairNo: undefined,
  faultId: undefined,
  faultName: undefined,
  equipmentModel: undefined,
  deptName: undefined,
  creatorUserName: undefined,
  createTime: undefined,
  equipmentId: undefined,
  equipmentName: undefined,
  faultTime: undefined,
  requestUserId: undefined,
  requestUserName: undefined,
  urgency: undefined,
  description: undefined,
  repairWay: 1,
  dutyUserId: [],
  dutyUserName: undefined,
  status: undefined,
  resolved: undefined,
  expectedResolveTime: undefined
})

const dataLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
/** 打开弹窗 */
const openDetailInfo = async (id?: number) => {
  dialogVisible.value = true
  // 修改时，设置数据
  if (id) {
    dataLoading.value = true
    try {
      detailsInfo.value = await RepairRequestApi.getRepairRequest(id)
    } finally {
      dataLoading.value = false
    }
  }
}

defineExpose({ openDetailInfo }) // 提供 openDetailInfo 方法，用于打开弹窗显示详细信息



</script>
